<template>
  <view class="flex">
    <a-card title="基本用法">
      <a-space>
        <a-badge :count="9">
          <view class="cvart"> </view>
        </a-badge>
        <a-badge :count="9" dot color="yellow">
          <view class="cvart"> </view>
        </a-badge>
      </a-space>
    </a-card>
    <a-card title="独立使用">
      <a-space>
        <a-badge :count="2" />
        <a-badge
          :count="2"
          :dot-style="{ background: '#E5E6EB', color: '#86909C' }"
        />
        <a-badge :count="16" />
        <a-badge :count="1000" :max-count="99" />
      </a-space>
    </a-card>

    <a-card title="最大值">
      <a-space>
        <a-badge :max-count="10" :count="0">
          <view class="cvart"> </view>
        </a-badge>
        <a-badge :max-count="10" :count="100">
          <view class="cvart"> </view>
        </a-badge>
        <a-badge :count="100">
          <view class="cvart"> </view>
        </a-badge>
        <a-badge :max-count="999" :count="1000">
          <view class="cvart"> </view>
        </a-badge>
      </a-space>
    </a-card>

    <a-card title="文本内容"
      ><a-space>
        <a-badge text="NEW">
          <view class="cvart"> </view>
        </a-badge>
        <a-badge text="HOT">
          <view class="cvart"> </view>
        </a-badge>
      </a-space>
    </a-card>

    <a-card title="状态点">
      <a-space wrap>
        <a-badge status="normal" text="Normal" />
        <a-badge status="processing" text="Processing" />
        <a-badge status="success" text="Success" />
        <a-badge status="warning" text="Warning" />
        <a-badge status="danger" text="Danger" />
      </a-space>
    </a-card>

    <a-card title="状态点">
      <a-space wrap>
        <a-badge
          v-for="color in colors"
          :key="color"
          :color="color"
          :text="color"
          :style="{ marginRight: '24px' }"
        />
      </a-space>
    </a-card>
  </view>
</template>

<script lang="ts" setup>
const colors = [
  "red",
  "orangered",
  "orange",
  "gold",
  "lime",
  "green",
  "cyan",
  "arcoblue",
  "purple",
  "pinkpurple",
  "magenta",
  "gray",
];
</script>

<style lang="scss">
.flex {
  padding: 20rpx;
}
.cvart {
  position: relative;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  color: var(--color-white);
  font-size: 20px;
  white-space: nowrap;
  vertical-align: middle;
  background-color: var(--color-fill-4);
}

:deep(.arco-card) {
  margin-bottom: 30rpx;
}
</style>
